import React, {useState} from 'react';
import { useHistory } from 'react-router-dom';

import {Layout, Row, Col, Button, Dropdown, Menu} from 'antd';
import axios from '@src/lib/axios';

const { Sider, Content, Header } = Layout;

import {
    LoadingOutlined,
    PlusOutlined,
    CloseCircleOutlined,
    EyeInvisibleOutlined,
    MinusSquareOutlined,
    BellOutlined,
    EyeOutlined,
    LogoutOutlined,
    DownOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined
} from "@ant-design/icons";

function Head({collapsed, setCollapsed}) {
    const history = useHistory();

    let nickName = localStorage.getItem('_token') || '';
    try {
        if (nickName) {
            nickName = JSON.parse(nickName).nick_name;
        }
    } catch {

    }

    const onOpera = (k) => {
        axios.post('/user/logout').then(res => {
            if (res.code === 0) {
                history.push('/login');
            }
        })
    }

    const menu = (
        <Menu onClick={onOpera}>
            <Menu.Item key={0}>
                <Button type="link"><LogoutOutlined />退出登陆</Button>
            </Menu.Item>
        </Menu>
    );
    return (
        history.location.pathname === '/login'? null :
        <Header className="site-layout-background" style={{ padding: 0}}>
            <Row>
                <Col span={12}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed)
                    })}
                </Col>
                <Col span={12} align="right" className="user-box">
                    <span className="nickName">{nickName}</span>
                    <Dropdown overlay={menu}>
                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                            <DownOutlined />
                        </a>
                    </Dropdown>
                </Col>
            </Row>
        </Header>
    );
}

export default React.memo(Head);
